<!-- 选项式 -->
<!-- <script>
// 导出组件
export default {
  data() {
    return {
      // 链接信息 列表
      skipList: [
        { name: '百度', str: 'https://www.baidu.com' },
        { name: '京东', str: 'https://www.jd.com' },
        { name: '淘宝', str: 'https://www.taobao.com' },
        { name: '唯品会', str: 'https://www.vip.com' },
      ],
      // 链接名称
      skipName: '随机页面',
      // 链接字符串
      skipStr: '',
    }
  },
  methods: {
    // 点击执行的方法
    skip() {
      // 跳转页面
      location.href = this.skipStr
    },
  },
  mounted() {
    // 启动定时器，每隔 1 秒随机更新跳转信息
    this.timer = setInterval(() => {
      const index = Math.floor(Math.random() * this.skipList.length)
      this.skipName = this.skipList[index].name
      this.skipStr = this.skipList[index].str
    }, 1000)
  },
  beforeUnmount() {
    // 清除定时器，避免内存泄漏
    if (this.timer) {
      clearInterval(this.timer)
    }
  },
}
</script>

<template>
  <p v-html="skipName"></p>
  <input type="button" value="进入" @click="skip" />
</template> -->

<!-- 组合式 -->
<script setup>
// 引用 api
import { ref } from 'vue'

// 链接信息 列表
let skipList = [
  { name: '百度', str: 'https://www.baidu.com' },
  { name: '京东', str: 'https://www.jd.com' },
  { name: '淘宝', str: 'https://www.taobao.com' },
  { name: '唯品会', str: 'https://www.vip.com' },
]

// 链接名称
let skipName = ref('随机页面')

// 链接字符串
let skipStr

// 点击执行的方法
function skip() {
  // 跳转页面
  location.href = skipStr
}

// 定时器
setInterval(() => {
  // 随机修改 跳转信息
  const index = Math.floor(Math.random() * skipList.length)

  // 修改链接名称
  skipName.value = skipList[index].name

  // 修改链接字符串
  skipStr = skipList[index].str
}, 1000)
</script>

<template>
  <p v-html="skipName"></p>
  <input type="button" value="进入" @click="skip" />
</template>
